<template>
  <!-- 组织架构  -->
  <div class="menu-page">
    <div id="organizational">
      <div class="org-body">
        <div class="org">
          <div class="org-search">
            <el-input size="small" v-model="searchOrg" placeholder="search org"/>
          </div>
          <div class="org-tree">
            <el-tree
                ref="treeRef"
                :data="orgs"
                :props="{label:'empty',children:'children'}"
                @node-click="handleNodeClick"
                accordion
                highlight-current
                default-expanded-keys=0
                :filter-node-method="filterNode"
            >
              <template #default="{ node, data }">
                {{ data.empty.name }}
              </template>
            </el-tree>
          </div>
        </div>
        <div class="org-user">
          <div class="org-user-but-tool">
            <el-button-group style="margin-right: 10px; margin-top: 10px;">
              <el-button
                  link
                  icon="AddUserIcon" type="primary"
                  @click="openAdd"
              />
            </el-button-group>
          </div>
          <el-table class="org-user-table" :data="tableData">
            <el-table-column label="头像">
              <template #default="scope">
                <el-avatar size="small" :src="scope.row.picture"/>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名"/>
            <el-table-column prop="account" label="账号"/>
            <el-table-column prop="email" label="邮箱"/>
            <el-table-column prop="gender" label="性别"/>
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                {{ Status(scope.row.status) }}
              </template>
            </el-table-column>
            <el-table-column prop="creatTime" label="创建时间">
              <template #default="scope">
                {{ dateFormat(scope.row.creatTime) }}
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="150px">
              <template #header>
                <el-input v-model="search" size="small" placeholder="名称查询"/>
              </template>
              <template #default="scope">
                <el-button link icon="Edit" type="warning" size="small" @click="editOpt(scope.row,scope.$index)"/>
                <el-popconfirm title="确认删除?"
                               @confirm="deleteOpt(scope.row,scope.$index)"
                >
                  <template #reference>
                    <el-button link icon="Delete" type="danger" size="small"/>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <Pages ref="orgPage" @action="paging" @change="changeSize"/>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
        v-model="addflag"
        title="添加用户"
        width="20%"
        draggable
        append-to-body
        @close="closeAddUser"
        :close-on-click-modal="false"
    >
      <el-form
          :model="form"
          ref="addUserFormRef"
          :rules="adduserRules"
      >
        <el-form-item label="用户" prop="Id">
          <el-select
              v-model="form.Id"
              filterable
              :filter-method="filterMethod"
              popper-class="user-select"
              style="width: 100%"
          >
            <el-option
                v-for="user in accountsFilter"
                :key="user.id"
                :label="user.name"
                :value="user.id"
            >
              <div style="display: flex;flex-direction: row">
                <div>
                  <el-avatar size="small" :src="user.picture"/>
                </div>
                <div style="margin-left: 5px">
                  {{ user.account }}
                </div>
                <div style="margin-left: 5px">
                  {{ user.name }}
                </div>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授权" prop="roles">
          <el-select
              v-model="form.roles"
              multiple
              clearable
              style="width: 100%"
          >
            <el-option v-for="role in orgRoles" :label="role.name" :value="role.id" :key="role.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="addUser(addUserFormRef)">添加</el-button>
        <el-button @click="addflag=!addflag">取消</el-button>
      </template>
    </el-dialog>
    <el-dialog
        title="用户配置"
        v-model="editflag"
        width="30%"
        draggable
    >
      <div class="org-use-edit">
        <el-form
            :model="editForm"
        >
          <el-form-item label="昵称">
            <el-input v-model="editForm.row.name" disabled/>
          </el-form-item>
          <el-form-item label="角色">
            <el-select
                v-model="editForm.selectrole"
                value-key="id"
                @change="editRoleChange"
            >
              <el-option v-for="role in editForm.roles" :key="role.id" :label="role.name" :value="role.id">
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                  <span>{{ role.name }}</span>
                  <div @click.stop>
                    <el-popconfirm
                        title="删除角色?"
                        @click.stop
                        @confirm.stop="DelUserRole(role.id)"
                    >
                      <template #reference>
                        <el-button link icon="Delete" type="danger"/>
                      </template>
                    </el-popconfirm>
                  </div>
                </div>
              </el-option>
            </el-select>
            <el-button @click="addRole=!addRole" link icon="Plus" style="margin-left: 5px;"/>
          </el-form-item>
          <el-collapse>
            <el-collapse-item title="菜单权限">
              <el-tree-select
                  v-model="editForm.userMenu"
                  multiple
                  :data="editForm.menus"
                  node-key="id"
                  value-key="id"
                  :props="{label:'title',children:'children'}"
                  :check-strictly="true"
                  style="width: 100%;"
              />
            </el-collapse-item>

            <el-collapse-item title="功能权限">
              <el-select
                  v-model="editForm.userFunc"
                  multiple
                  value-key="id"
                  style="width: 100%;"
              >
                <el-option v-for="func in editForm.funcs" :key="func.id" :label="func.name" :value="func.id"/>
              </el-select>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </div>
      <template #footer>
        <el-button type="primary" @click="editSave">保存</el-button>
      </template>
    </el-dialog>
    <el-dialog
        v-model="addRole"
        width="25%"
        draggable
        title="授权角色"
        @open="openAddAuth"
    >
      <el-table
          :data="roleTable"
          ref="roleTableRef"
          height="300px"
      >
        <el-table-column type="selection" :selectable="ifSelectRole"/>
        <el-table-column prop="name" label="角色"/>
      </el-table>
      <div style="margin-top: 5px">
        <el-button type="primary" icon="Plus" style="width: 100%" @click="authRole">授权</el-button>
      </div>
      <div>
        <Pages ref="rolePageRef" @action="RolePage" @change="RoleChange"/>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import Pages from "../../../../management-system/components/Pages.vue";
import {computed, onMounted, onUnmounted, reactive, ref, watch} from "vue";
import {dateFormat, Status} from "../../../../utils/utils";
import {userStore} from "../../../../store/user";
import Axios from "../../../../plugins/axios";
import {sys} from "../../../../model/system";
import event from "../../../../plugins/event";
import {type} from "../../../../model/type";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {UpdateUserInfo} from "../../../../plugins/evenKey";

const orgs = ref<any>([])
const tableData = ref<any>([])
const search = ref()
const orgPage = ref()
const user = userStore()
const searchOrg = ref('')
const accounts = ref<type.Account[]>([])
const accountsFilter = ref<type.Account[]>([])
const orgRoles = ref([])

const treeRef = ref()
// 当前选择的默认组织id
const selectOrg = ref()
selectOrg.value = user.userInfo.org

const addRole = ref(false)
const roleTable = ref([])
const rolePageRef = ref()
const roleTableRef=ref()

async function openAddAuth() {
  let size = rolePageRef.value.GetSize()
  let data = await getRole(1, size)
  roleTable.value = data.rows
  rolePageRef.value.SetTotal(data.count)
}

function authRole() {
  if (CurrentRow.value.id === user.userInfo.user.id) {
    ElMessage({
      type: 'warning',
      message: '禁止授权',
    })
    return
  }
  let selectionRows = roleTableRef.value.getSelectionRows();
  let roles=[]
  selectionRows.forEach(item=>{
    roles.push(item.id as never)
  })
  Axios.post('/api/configuration/org/user/auth/add/role',{
    userId:CurrentRow.value.id,
    orgId:selectOrg.value,
    roles:roles
  }).then(resopnse=>{
    let data:sys.Result<any> =resopnse.data
    if (data.code==='0000'){
      ElMessage({
        type:'success',
        message:'授权成功'
      })
      initEdit()
    }
  })
}

function ifSelectRole(row:sys.Role, index) {
  // let f=editForm.value.roles.includes(row)
  // console.log(f)
  return !editForm.value.roleIds.includes(row.id as never)
}

async function RolePage(newPage: number, size: number) {
  let data = await getRole(newPage, size)
  roleTable.value = data.rows
  rolePageRef.value.SetTotal(data.count)
}

async function RoleChange(page: number, size: number) {
  let data = await getRole(page, size)
  roleTable.value = data.rows
  rolePageRef.value.SetTotal(data.count)
}

function getRole(page: number, size: number) {
  return new Promise<any>(resolve => {
    Axios.get('/api/configuration/org/role/list', {
      params: {
        page: page,
        size: size,
        orgId: selectOrg.value
      }
    }).then(response => {
      let data: sys.Result<any> = response.data
      if (data.code === '0000') {
        resolve(data.data)
      } else {
        resolve([])
      }
    })
  })
}

const editflag = ref(false)
const CurrentRow = ref()
const editForm = ref({
  row: {},
  selectrole: 0,
  roles: [],
  roleIds: [],
  menus: [],
  funcs: [],
  userMenu: [],
  userMenuBak: [],
  userFunc: [],
  userFuncBak: []
})

function editOpt(row, index) {
  CurrentRow.value = {...row}
  editForm.value = {
    row: {...row},
    selectrole: 0,
    roles: [],
    roleIds: [],
    menus: [],
    funcs: [],
    userMenu: [],
    userMenuBak: [],
    userFunc: [],
    userFuncBak: []
  }
  initEdit()
  editflag.value = !editflag.value
}

function initEdit() {
  // 初始化当前用户所在组织的角色信息  当前组织来源于当前选择的组织信息  selectOrg
  Axios.get('/api/configuration/org/user/role', {
    params: {
      orgId: selectOrg.value,
      userId: CurrentRow.value.id
    }
  }).then(async response => {
    let data: sys.Result<sys.Role[]> = response.data
    if (data.code === '0000') {
      editForm.value.selectrole = data.data[0].id
      editForm.value.roles = data.data as never[]
      if (editForm.value.roles.length <= 0) {
        return
      }
      console.log(data)
      // 初始化 当前角色对应的权限信息
      editForm.value.roles.forEach((item:sys.Role)=>{
        editForm.value.roleIds.push(item.id as never)
      })
      // 初始化当前角色的菜单信息
      editForm.value.menus = await GetRoleMenu(editForm.value.selectrole) as never[]

      // 初始化当前组织 的用户的当前角色 已授权菜单信息
      editForm.value.userMenu = await GetUserMenu(CurrentRow.value.id, selectOrg.value, editForm.value.selectrole) as never[]
      editForm.value.userMenuBak = [...editForm.value.userMenu]
      // 初始化当前角色的功能信息
      editForm.value.funcs = await GetRoleFunc(editForm.value.selectrole)

      // 初始化当前组织 的用户的当前角色 已授权功能信息
      editForm.value.userFunc = await GetUserFunc(CurrentRow.value.id, selectOrg.value, editForm.value.selectrole) as never[]
      editForm.value.userFuncBak = [...editForm.value.userFunc]
      console.log('form:', editForm.value)
    }
  })
}

function DelUserRole(roleId:number) {
  if (CurrentRow.value.id === user.userInfo.user.id) {
    ElMessage({
      type: 'warning',
      message: '禁止删除',
    })
    return
  }
  Axios.post('/api/configuration/org/user/auth/del/role',{
    userId:CurrentRow.value.id,
    orgId:selectOrg.value,
    roleId:roleId
  }).then(response=>{
    let data:sys.Result<any> =response.data
    if (data.code==='0000'){
      ElMessage({
        type:'success',
        message:'删除成功'
      })
      // 重新加载数据
      initEdit()
    }
  })
}

// GetRoleMenu 获取角色的菜单权限
function GetRoleMenu(roleId: number) {
  return new Promise<any[]>(resolve => {
    Axios.get('/api/configuration/org/user/roleMenuList', {
      params: {
        roleId: roleId
      }
    }).then(resp => {
      let data: sys.Result<any> = resp.data
      if (data.code === '0000') {
        let tree = anx(data.data)
        console.log('菜单权限信息:', tree)
        resolve(tree)
      } else {
        resolve([])
      }
    })
  })
}

// GetRoleFunc 获取角色的功能权限
function GetRoleFunc(roleId: number) {
  return new Promise<never[]>(resolve => {
    Axios.get('/api/configuration/org/user/roleFuncList', {
      params: {
        roleId: roleId
      }
    }).then(resp => {
      let data: sys.Result<any> = resp.data
      if (data.code === '0000') {
        console.log('功能权限信息:', data)
        resolve(data.data)
      } else {
        resolve([])
      }
    })
  })
}


// 获取当前组织的用户的当前角色已授权菜单信息
function GetUserMenu(userId: number, orgId: number, roleId: number) {
  return new Promise<any[]>(resolve => {
    Axios.get('/api/configuration/org/user/menuList', {
      params: {
        userId,
        orgId,
        roleId,
      }
    }).then(response => {
      let data: sys.Result<any> = response.data
      if (data.code === '0000') {
        console.log('用户菜单授权信息:', data)
        let ids: any[] = []
        if (data.data==null){
          resolve([])
          return
        }
        data.data.forEach(item => {
          ids.push(item.menuId)
        })
        resolve(ids)
      } else {
        resolve([])
      }
    })
  })
}

// 获取当前组织的用户的当前角色已授权功能信息
function GetUserFunc(userId: number, orgId: number, roleId: number) {
  return new Promise<any[]>(resolve => {
    Axios.get('/api/configuration/org/user/funcList', {
      params: {
        userId,
        orgId,
        roleId,
      }
    }).then(response => {
      let data: sys.Result<any> = response.data
      if (data.code === '0000') {
        console.log('用户功能授权信息:', data)
        if (data.data === null) {
          resolve([])
          return
        }
        let ids: any[] = []
        data.data.forEach(item => {
          ids.push(item.funcId)
        })
        resolve(ids)
      } else {
        resolve([])
      }
    })
  })
}

async function editSave() {
  if (CurrentRow.value.id === user.userInfo.user.id) {
    ElMessage({
      type: 'warning',
      message: '禁止编辑',
    })
    return
  }
  let uid=CurrentRow.value.id
  let orgId=selectOrg.value
  let roleId=editForm.value.selectrole
  let flag=false

  // 计算 发生变化的 id
  console.log(editForm.value)
  let addKeys = editForm.value.userMenu.filter(item => {
    return !editForm.value.userMenuBak.includes(item)
  });
  console.log('add menu:', addKeys)
  let subKeys = editForm.value.userMenu.filter(item => {
    return !addKeys.includes(item)
  });
  console.log('sub menu:', subKeys)
  let delKeys = editForm.value.userMenuBak.filter(item => {
    return !subKeys.includes(item)
  });
  console.log('del menu:', delKeys)
  if (addKeys.length>0||delKeys.length>0){
    flag=await updateUserMenuAuth(uid,orgId,roleId,addKeys,delKeys)
    if (!flag) return
  }


  addKeys = editForm.value.userFunc.filter(item => {
    return !editForm.value.userFuncBak.includes(item)
  });
  console.log('add func:', addKeys)
  subKeys = editForm.value.userFunc.filter(item => {
    return !addKeys.includes(item)
  });
  console.log('sub func:', subKeys)
  delKeys = editForm.value.userFuncBak.filter(item => {
    return !subKeys.includes(item)
  });
  console.log('del func:', delKeys)

  if (addKeys.length>0||delKeys.length>0){
    flag=await updateUserFuncAuth(uid,orgId,roleId,addKeys,delKeys)
    if (!flag) return
  }
  if (flag){
    ElMessage({
      type:'success',
      message:'保存成功'
    })
    initEdit()
  }
}

function updateUserMenuAuth(userId: number, orgId: number, roleId: number, addKeys: any[]=[], delKeys: any[]=[]) {
  return new Promise<boolean>(resolve => {
    Axios.post('/api/configuration/org/user/edit/menu',{
      userId:userId,
      orgId:orgId,
      roleId:roleId,
      addKeys:addKeys,
      delKeys:delKeys
    }).then(response=>{
      let data:sys.Result<any> =response.data
      if (data.code==='0000'){
        resolve(true)
      }else {
        resolve(false)
      }
    })
  })
}

function updateUserFuncAuth(userId: number, orgId: number, roleId: number, addKeys: any[]=[], delKeys: any[]=[]) {
  return new Promise<boolean>(resolve => {
    Axios.post('/api/configuration/org/user/edit/func',{
      userId:userId,
      orgId:orgId,
      roleId:roleId,
      addKeys:addKeys,
      delKeys:delKeys
    }).then(response=>{
      let data:sys.Result<any> =response.data
      if (data.code==='0000'){
        resolve(true)
      }else {
        resolve(false)
      }
    })
  })
}

async function editRoleChange(data) {
  let id = CurrentRow.value.id
  let orgId = selectOrg.value
  let roleId = data
  // 初始化当前角色的菜单信息
  editForm.value.menus = await GetRoleMenu(roleId) as never[]

  // 初始化当前组织 的用户的当前角色 已授权菜单信息
  editForm.value.userMenu = await GetUserMenu(id, orgId, roleId) as never[]
  editForm.value.userMenuBak = [...editForm.value.userMenu]
  // 初始化当前角色的功能信息
  editForm.value.funcs = await GetRoleFunc(roleId)

  // 初始化当前组织 的用户的当前角色 已授权功能信息
  editForm.value.userFunc = await GetUserFunc(id, orgId, roleId) as never[]
  editForm.value.userFuncBak = [...editForm.value.userFunc]

  console.log('form:', editForm.value)
}

function deleteOpt(row, index) {
  if (row.id === user.userInfo.user.id) {
    ElMessage({
      type: 'warning',
      message: '无法操作'
    })
    return
  }
  Axios.post('/api/configuration/org/user/del', {
    orgId: selectOrg.value,
    userId: row.id
  }).then(response => {
    let data: sys.Result<any> = response.data
    if (data.code === '0000') {
      ElMessage({
        type: 'success',
        message: data.msg
      })
      // 加载数据
      let page = orgPage.value.GetPageNum()
      let size = orgPage.value.GetSize();
      Axios.get("/api/configuration/org/user", {
        params: {
          page: page,
          size: size,
          org: selectOrg.value
        }
      }).then(function (response) {
        let data = response.data
        if (data.code === "0000") {
          tableData.value = data.data.rows
          orgPage.value.SetPage(page)
          orgPage.value.SetTotal(data.data.count)
        }
      })
    }
  })
}

// 用户选择筛选
function filterMethod(data) {
  if (data === '') {
    accountsFilter.value = accounts.value
    return;
  }
  accountsFilter.value = accounts.value.filter(item => {
    return item.account.startsWith(data) || item.name.startsWith(data)
  })
}

const filterNode = (value: string, data) => {
  if (!value) return true
  return data.empty.name.includes(value)
}

watch(searchOrg, (val) => {
  treeRef.value!.filter(val)
})

function handleNodeClick(data) {
  selectOrg.value = data.empty.id
  let size = orgPage.value.GetSize();
  Axios.get("/api/configuration/org/user", {
    params: {
      page: 1,
      size: size,
      org: selectOrg.value
    }
  }).then(function (response) {
    let data = response.data
    if (data.code === "0000") {
      tableData.value = data.data.rows
      orgPage.value.SetPage(1)
      orgPage.value.SetTotal(data.data.count)
    }
  })
}

function paging(newPage, size) {
  // 执行翻页
  Axios.get("/api/configuration/org/user", {
    params: {
      page: newPage,
      size: size,
      org: selectOrg.value
    }
  }).then(function (response) {
    let data = response.data
    if (data.code === "0000") {
      tableData.value = data.data.rows
      orgPage.value.SetTotal(data.data.count)
    }
  })
}

function changeSize(page: number, size: number) {
  Axios.get("/api/configuration/org/user", {
    params: {
      page: page,
      size: size,
      org: selectOrg.value
    }
  }).then(function (response) {
    let data = response.data
    if (data.code === "0000") {
      tableData.value = data.data.rows
      orgPage.value.SetTotal(data.data.count)
    }
  })
}

const GetIndex = computed(() => (v: number) => {
  return orgPage.value.Index(v)
})


const addflag = ref(false)
const addUserFormRef = ref<FormInstance>()
const form = ref({
  Id: null,
  OrgId: selectOrg.value,
  roles: []
})

function checkId(rule: any, value: any, callback: any) {
  if (value === null) {
    callback(new Error('必填'))
  }
  callback()
}

function checkRoles(rule: any, value: any, callback: any) {
  if (value.length == 0) {
    callback(new Error('必填'))
  } else {
    if (form.value.roles.length < 1) {
      callback(new Error('必填'))
    }
    callback()
  }
}

const adduserRules = reactive<FormRules>({
  Id: [{validator: checkId, trigger: 'blur'}],
  roles: [{validator: checkRoles, trigger: 'blur'}],
})

function closeAddUser() {
  addUserFormRef.value?.resetFields()
}

function openAdd() {
  if (selectOrg.value < 1) {
    ElMessage({
      type: 'warning',
      message: '请选择组织进行添加'
    })
    return
  }
  addflag.value = !addflag.value
  form.value = {
    Id: null,
    OrgId: selectOrg.value,
    roles: []
  }
  orgRoles.value = []
  // 初始化当前组织的 角色信息
  Axios.get("/api/configuration/org/role/list", {
    params: {
      orgId: selectOrg.value,
      page: 1,
      size: 1000,
    }
  }).then(function (response) {
    let result: sys.Result<any> = response.data
    if (result.code === "0000") {
      orgRoles.value = result.data.rows
    }
  })
  // 初始化用户信息
  Axios.get('/api/configuration/user/accounts', {
    params: {
      page: 1,
      size: 1000
    }
  }).then(function (resp) {
    let data = resp.data;
    if (data.code === "0000") {
      accounts.value = data.data.rows
      accountsFilter.value = data.data.rows
    }
  })
}

function addUser(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.validate((flag) => {
    if (flag) {
      // todo 添加用户接口
      Axios.post('/api/configuration/org/user/add', form.value).then(response => {
        let data: sys.Result<any> = response.data
        if (data.code === '0000') {
          ElMessage({
            type: 'success',
            message: data.msg
          })
          let size = orgPage.value.GetSize();
          let num = orgPage.value.GetPageNum();
          Axios.get("/api/configuration/org/user", {
            params: {
              page: num,
              size: size,
              org: selectOrg.value
            }
          }).then(function (response) {
            let data = response.data
            if (data.code === "0000") {
              tableData.value = data.data.rows
              orgPage.value.SetTotal(data.data.count)
            }
          })
          event.emit(UpdateUserInfo)
        }
      })
      addflag.value = !addflag.value
    } else {
      ElMessage({
        type: 'warning',
        message: '请填写信息'
      })
    }
  })
}

function init() {
  selectOrg.value = user.userInfo.org
  Axios.get("/api/configuration/org/list", {
    params: {
      org: selectOrg.value
    }
  }).then(function (response) {
    let data = response.data
    if (data.code === "0000") {
      orgs.value = data.data
    }
  })
  let size = orgPage.value.GetSize();
  let num = orgPage.value.GetPageNum();
  Axios.get("/api/configuration/org/user", {
    params: {
      page: num,
      size: size,
      org: selectOrg.value
    }
  }).then(function (response) {
    let data = response.data
    if (data.code === "0000") {
      tableData.value = data.data.rows
      orgPage.value.SetTotal(data.data.count)
    }
  })
}

function anx(arr: any[]): any[] {
  let tree: any[] = []
  arr.forEach(item => {
    let obj = {...item, ...item.empty}
    let c = anx(obj.children)
    obj.children = c
    tree.push(obj)
  })
  return tree
}

event.on('updateOrg', init)
onMounted(init)
onUnmounted(() => {
  event.off('updateOrg', init)
})


</script>

<style scoped>
#organizational {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.org-body {
  width: 97%;
  margin: auto;
  height: 800px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.org {
  width: 20%;
  box-shadow: var(--el-box-shadow-light);
  background-color: white;
}

.org-tree {
  overflow: hidden;
}

.org-user {
  width: 79%;
  box-shadow: var(--el-box-shadow-light);
  background-color: white;
}


.org-search {
  width: 90%;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.org-user-but-tool {
  display: flex;
  flex-direction: row-reverse;
}

</style>
<style>
.user-select {
  height: 200px;
}
</style>